<template>
  <div id="content">
    <vue-particles
      :particle-opacity="0.7"
      :particles-number="60"
      :particle-size="4"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="2"
      :hover-effect="true"
      :click-effect="true"
      color="#fff"
      shape-type="circle"
      lines-color="#fff"
      hover-mode="grab"
      click-mode="push"
      class="particles"
    />
    <div class="mack_box"/>

    <div id="wx_reg" class="login_box">
      <!-- <img src="./logo.png"> -->
      <p style="position: relative; width: 100%;text-align: center;color: #333;top: 10px;">输入团队名称，即可创建团队</p>

      <div class="input_box" style="margin-top: 80px;">
        <el-row >
          <el-input v-model="name" placeholder="请输入内容"/>

        </el-row>
      </div>

      <div class="input_box" style="margin-top: 0px;">
        <el-row >
          <el-button class="input_btn" type="primary" @click="submitTeam()">提交创建团队申请</el-button>
        </el-row>
      </div>

      <p style="position: relative; width: 100%;text-align: center;color: #787878;top: 30px;font-size:14px;" @click="goBack()">返回系统</p>

    </div>

    <p class="copyInfo">Copyright © 2018-2020 koolearn.com Inc. All rights reserved. 杭州智牛科技有限公司 版权所有</p>
  </div>

</template>

<script>
import VueParticles from 'vue-particles'
import t from './../../utils/request'
import Vue from 'vue'

Vue.use(VueParticles)

export default {
  components: {
  },
  data() {
    return {
      name: ''
    }
  },
  mounted() {
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
  methods: {
    goBack: function() {
      this.$router.back()
    },
    submitTeam: function() {
      t.toPost('/admin/create/team', {
        name: this.name,
        uid: JSON.parse(localStorage.getItem('userInfo')).id
      }, (res) => {
        if (res.code == '000000') {
          document.location.href = 'http://ad.zhiniugroup.com/znadmin/'
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  .content {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .particles{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #e1e3e4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('http://pcefcr3s6.bkt.clouddn.com//bg/login_bg.62613bc.png');
    z-index: 99;
    overflow: hidden;

  }
  .mack_box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 9;
    overflow: hidden;
  }
  .login_box {
    position: relative;
    top: 300px;
    width: 400px;
    height: 300px;
    background: #fff;
    z-index: 99;
    margin: 0px auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, .2);
  }
  .input_box {
    position: relative;
    width: 80%;
    margin: 0px auto;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .input_btn {
    width: 100%;
    height: 45px;
  }
  .copyInfo {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    z-index: 999;
  }
</style>
